<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-header style="background:#2d3035;border:1px solid #aaa;">
      <el-row>
        <el-col :span="8"><span>LO</span>后台管理系统</el-col>
        <el-col :span="12">
          <ul style="border:0;" class="nav">
            <router-link to="/prolist" tag="li">管理商品</router-link>
            <router-link to="/userInfo" tag="li">用户中心</router-link>
            <router-link to="/order" tag="li">订单管理</router-link>
            <router-link to="/category" tag="li">管理商品分类</router-link>
          </ul>
        </el-col>
        <el-col :span="4">
          <div id="user">
            <span class="el-icon-s-custom"></span>
            <span>{{username}}</span>
            <span @click="open()">退出</span>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="20%" style="background-color:#2d3035;border-right:1px solid #aaa;">
      <el-menu
        @select="handleSelect" 
        text-color="#aaa" 
        active-text-color="#666" 
        default-active="1" 
        :unique-opened="true"
        :default-openeds="['1', '3']" 
      >
        <el-submenu index="1">
          <template slot="title" style="color:#fff;"><i class="el-icon-user-solid"></i>个人中心</template>
            <el-menu-item index="1-1">个人信息编辑</el-menu-item>
            <el-menu-item index="1-2">我的钱包</el-menu-item>
        </el-submenu>
        <el-submenu sytle="color:#fff;" index="2">
          <template slot="title"><i class="el-icon-message-solid"></i>消息管理</template>
          <el-menu-item index="2-1">店铺营收记录</el-menu-item>
          <el-menu-item index="2-2">商品评价管理</el-menu-item>
          <el-menu-item index="2-3">每日推送新闻</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>店铺管理</template>
          <el-submenu index="3-1" :router="true">
            <template slot="title">店铺管理</template>
            <el-menu-item @click="look()" index="shops">查看店铺</el-menu-item>
            <el-menu-item index="3-1">收支数据统计</el-menu-item>
            <el-menu-item index="3-2">上线新店铺</el-menu-item>
            <el-menu-item index="3-2">活动发布</el-menu-item>
          </el-submenu>
          <el-submenu :router="true" index="3-2">
            <template slot="title">商品管理</template>
            <el-menu-item index="3-1">查看所有商品</el-menu-item>
            <el-menu-item index="3-1">查询商品</el-menu-item>
            <el-menu-item index="3-2">销售记录</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container style="background:#000;">

      <el-main>
        <el-page-header @back="goBack" :content="contextTitle"></el-page-header>
        <router-view @toparent="getval"></router-view>
      </el-main>
    </el-container>
    </el-container>
    
  </el-container>
  
</template>


<style>
    .el-page-header{
        color:#fff;
    }
    .el-page-header__content{
        color:#fff !important;
        font-size:16px;
    }
    .el-breadcrumb__separator{
      color:#666;
    }
    .nav{
      list-style:none;
      display:flex;
    }
    .nav li{
      line-height:40px;
      font-size:14px;
      color:#eee;
      flex:1;
    }
    .nav li:hover{
      color:orangered;
    }
    #user{
      display: flex;
      justify-content: flex-end;
      padding-right:30px;
    }
    #user span{
      color:#fff;
      font-size:12px;
      line-height: 40px;
    }
    #user span:nth-of-type(2){
      margin: 0 10px;
    }
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      padding:0;
    }
    .el-aside,.el-submenu__title,.el-submenu,.el-menu-item, .el-menu-item-group__title{
      background:#2d3035;
      color:#aaa;
    }
    .el-menu-item-group__title{
      background:#303133;
    }
    .el-submenu__title:hover,.el-submenu:hover,.el-menu-item:hover{
      color:#666;background:#eee;
    }
    .nav {
      display: flex;
      border:1px solid red;
      height:100%;
    }
    .el-col{
      color:#fff;
      font-size:18px;
    }
    .el-col:nth-of-type(1){
      text-indent:1em;
      font-size:28px;
    }
</style>

<script>
import * as api from '../api/getManagerInfo'
  export default {
    name:'Index',
    data() {
      return {
        username:'',
        title:'',
        title1:'',
        contextTitle:'主页',
      }
    },
    methods:{
      goBack(){
        this.$router.go(-1)
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      tap(){
        this.$router.push('/login')
      },
      look(){
        this.$router.push('/shops')
      },
      getval(msg){
        this.title = msg;
        console.log(msg)
        this.contextTitle = msg
      },
      
      open() {
        console.log(111)
        
        this.$confirm('请您确认是否退出', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'danger',
            message: '即将跳转页面!',
          });
          this.$router.push('/login')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '操作已取消'
          });
        });
      }
    },
    mounted(){
      api.getManagerInfo().then(data=>{
        this.username = data.data.nickName
      })
    }
  };
</script>